<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛小程序原型图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        body {
            background: #f5f5f5;
            padding: 20px;
        }

        .prototype-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            padding: 20px;
        }

        .phone-frame {
            width: 360px;
            height: 640px;
            background: white;
            border-radius: 32px;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        .title {
            text-align: center;
            color: #333;
            margin-bottom: 8px;
            font-size: 14px;
        }

        /* 通用样式 */
        .status-bar {
            height: 24px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            font-size: 12px;
            color: #666;
        }

        .nav-bar {
            height: 44px;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            padding: 0 16px;
            font-size: 16px;
        }

        .input {
            width: 100%;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 0 12px;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .btn {
            width: 100%;
            height: 44px;
            border: none;
            border-radius: 8px;
            background: #007bff;
            color: white;
            font-size: 16px;
            margin-bottom: 16px;
        }

        .btn-outline {
            background: white;
            border: 1px solid #007bff;
            color: #007bff;
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background: #ddd;
        }

        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            padding: 0 16px;
        }

        .tab-item {
            text-align: center;
            font-size: 12px;
            color: #666;
        }

        .tab-item.active {
            color: #007bff;
        }

        /* 页面特定样式 */
        .content {
            height: calc(100% - 68px);
            overflow-y: auto;
            padding: 16px;
        }

        .message-bubble {
            max-width: 70%;
            padding: 12px;
            border-radius: 16px;
            margin-bottom: 12px;
        }

        .message-received {
            background: #f0f0f0;
            align-self: flex-start;
        }

        .message-sent {
            background: #007bff;
            color: white;
            align-self: flex-end;
        }

        .chat-input {
            position: absolute;
            bottom: 16px;
            left: 16px;
            right: 16px;
            display: flex;
            gap: 8px;
        }
    </style>
</head>
<body>
    <div class="prototype-container">
        <!-- 登录页面 -->
        <div class="phone-frame">
            <div class="title">登录页面</div>
            <div class="status-bar">12:00</div>
            <div class="content" style="display: flex; flex-direction: column; justify-content: center;">
                <h1 style="text-align: center; margin-bottom: 32px; font-size: 24px;">论坛登录</h1>
                <input type="text" class="input" placeholder="用户名">
                <input type="password" class="input" placeholder="密码">
                <button class="btn">登录</button>
                <button class="btn btn-outline">注册</button>
                <a href="#" style="text-align: center; color: #666; text-decoration: none; font-size: 14px;">忘记密码？</a>
            </div>
        </div>

        <!-- 注册页面 -->
        <div class="phone-frame">
            <div class="title">注册页面</div>
            <div class="status-bar">12:00</div>
            <div class="content" style="display: flex; flex-direction: column; justify-content: center;">
                <h1 style="text-align: center; margin-bottom: 32px; font-size: 24px;">创建账号</h1>
                <input type="text" class="input" placeholder="用户名">
                <input type="email" class="input" placeholder="电子邮件">
                <input type="password" class="input" placeholder="密码">
                <input type="password" class="input" placeholder="确认密码">
                <div style="height: 4px; background: #eee; margin-bottom: 16px; border-radius: 2px;">
                    <div style="width: 60%; height: 100%; background: #28a745; border-radius: 2px;"></div>
                </div>
                <button class="btn">注册</button>
                <a href="#" style="text-align: center; color: #666; text-decoration: none; font-size: 14px;">已有账号？登录</a>
            </div>
        </div>

        <!-- 主页 -->
        <div class="phone-frame">
            <div class="title">主页</div>
            <div class="status-bar">12:00</div>
            <div class="nav-bar">首页</div>
            <div class="content">
                <div class="card">
                    <h3>这是一个示例帖子标题</h3>
                    <p style="color: #666; font-size: 14px; margin: 8px 0;">作者：张三 · 2小时前</p>
                    <div style="display: flex; gap: 16px; margin-top: 8px; color: #666;">
                        <span>👍 42</span>
                        <span>💬 15</span>
                    </div>
                </div>
                <div class="card">
                    <h3>另一个示例帖子标题</h3>
                    <p style="color: #666; font-size: 14px; margin: 8px 0;">作者：李四 · 3小时前</p>
                    <div style="display: flex; gap: 16px; margin-top: 8px; color: #666;">
                        <span>👍 28</span>
                        <span>💬 8</span>
                    </div>
                </div>
            </div>
            <button class="btn" style="position: absolute; bottom: 70px; right: 16px; width: auto; padding: 0 24px;">
                + 发帖
            </button>
            <div class="tab-bar">
                <div class="tab-item active">首页</div>
                <div class="tab-item">消息</div>
                <div class="tab-item">我的</div>
            </div>
        </div>

        <!-- 发布文章页面 -->
        <div class="phone-frame">
            <div class="title">发布文章页面</div>
            <div class="status-bar">12:00</div>
            <div class="nav-bar">
                <span style="flex: 1;">发布文章</span>
                <button class="btn" style="width: auto; height: 32px; padding: 0 16px; margin: 0;">发布</button>
            </div>
            <div class="content">
                <input type="text" class="input" placeholder="请输入标题" style="font-size: 18px;">
                <textarea class="input" placeholder="请输入正文内容..." style="height: 200px; resize: none;"></textarea>
                <div style="display: flex; gap: 8px;">
                    <button class="btn btn-outline" style="flex: 1;">添加图片</button>
                    <button class="btn btn-outline" style="flex: 1;">添加话题</button>
                </div>
            </div>
        </div>

        <!-- 文章详情页面 -->
        <div class="phone-frame">
            <div class="title">文章详情页面</div>
            <div class="status-bar">12:00</div>
            <div class="nav-bar">文章详情</div>
            <div class="content">
                <h2>这是一个示例帖子标题</h2>
                <div style="display: flex; align-items: center; margin: 16px 0;">
                    <div class="avatar"></div>
                    <div style="margin-left: 12px;">
                        <div>张三</div>
                        <div style="color: #666; font-size: 12px;">2小时前</div>
                    </div>
                </div>
                <p style="line-height: 1.6; margin-bottom: 16px;">这是文章的详细内容，可以包含多个段落...</p>
                <div style="display: flex; gap: 16px; margin: 16px 0;">
                    <button class="btn" style="flex: 1;">👍 点赞</button>
                    <button class="btn btn-outline" style="flex: 1;">💬 评论</button>
                </div>
                <div style="margin-top: 24px;">
                    <h3>评论 (15)</h3>
                    <div class="card">
                        <div style="display: flex;">
                            <div class="avatar"></div>
                            <div style="margin-left: 12px; flex: 1;">
                                <div>李四</div>
                                <div style="color: #666; font-size: 14px;">这是一条评论...</div>
                                <div style="color: #999; font-size: 12px; margin-top: 4px;">1小时前</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人信息页面 -->
        <div class="phone-frame">
            <div class="title">个人信息页面</div>
            <div class="status-bar">12:00</div>
            <div class="nav-bar">个人中心</div>
            <div class="content">
                <div style="text-align: center; margin: 24px 0;">
                    <div class="avatar" style="width: 80px; height: 80px; margin: 0 auto;"></div>
                    <h2 style="margin: 12px 0;">张三</h2>
                </div>
                <div class="card">
                    <div style="display: flex; justify-content: space-around; text-align: center;">
                        <div>
                            <div style="font-size: 20px; font-weight: bold;">42</div>
                            <div style="color: #666; font-size: 14px;">帖子</div>
                        </div>
                        <div>
                            <div style="font-size: 20px; font-weight: bold;">128</div>
                            <div style="color: #666; font-size: 14px;">获赞</div>
                        </div>
                        <div>
                            <div style="font-size: 20px; font-weight: bold;">56</div>
                            <div style="color: #666; font-size: 14px;">关注</div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div style="margin-bottom: 16px;">
                        <div style="color: #666; font-size: 14px;">电子邮件</div>
                        <div>zhangsan@example.com</div>
                    </div>
                    <div>
                        <div style="color: #666; font-size: 14px;">注册时间</div>
                        <div>2024-01-15</div>
                    </div>
                </div>
                <button class="btn">编辑资料</button>
                <button class="btn btn-outline">修改密码</button>
            </div>
            <div class="tab-bar">
                <div class="tab-item">首页</div>
                <div class="tab-item">消息</div>
                <div class="tab-item active">我的</div>
            </div>
        </div>

        <!-- 消息列表页面 -->
        <div class="phone-frame">
            <div class="title">消息列表页面</div>
            <div class="status-bar">12:00</div>
            <div class="nav-bar">消息</div>
            <div class="content">
                <div class="card" style="display: flex; align-items: center; cursor: pointer;">
                    <div class="avatar"></div>
                    <div style="flex: 1; margin-left: 12px;">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="font-weight: bold;">李四</div>
                            <div style="color: #999; font-size: 12px;">10:30</div>
                        </div>
                        <div style="color: #666; font-size: 14px; margin-top: 4px;">最新一条消息预览...</div>
                        <div style="background: #ff4d4f; color: white; width: 20px; height: 20px; border-radius: 10px; text-align: center; line-height: 20px; font-size: 12px; position: absolute; right: 16px; top: 16px;">2</div>
                    </div>
                </div>
                <div class="card" style="display: flex; align-items: center; cursor: pointer;">
                    <div class="avatar"></div>
                    <div style="flex: 1; margin-left: 12px;">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="font-weight: bold;">王五</div>
                            <div style="color: #999; font-size: 12px;">昨天</div>
                        </div>
                        <div style="color: #666; font-size: 14px; margin-top: 4px;">另一条消息预览...</div>
                    </div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item">首页</div>
                <div class="tab-item active">消息</div>
                <div class="tab-item">我的</div>
            </div>
        </div>

        <!-- 聊天详情页面 -->
        <div class="phone-frame">
            <div class="title">聊天详情页面</div>
            <div class="status-bar">12:00</div>
            <div class="nav-bar">
                <span style="flex: 1;">与 李四 的对话</span>
                <span style="font-size: 14px;">在线</span>
            </div>
            <div class="content" style="display: flex; flex-direction: column;">
                <div style="flex: 1; display: flex; flex-direction: column;">
                    <div class="message-bubble message-received">
                        你好！这是一条示例消息。
                    </div>
                    <div class="message-bubble message-sent">
                        你好！这是回复消息。
                    </div>
                </div>
                <div class="chat-input">
                    <input type="text" class="input" placeholder="输入消息..." style="margin: 0;">
                    <button class="btn" style="width: auto; padding: 0 16px; margin: 0;">发送</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 